<template>
    <div class="login-page">
        <div class="login-container">
            <h1 class="login-title">登录</h1>
            <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="loginFormData.username" prop="username">
                        <template #prefix>
                            <i class="iconfont icon-yonghu"></i>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginFormData.password">
                        <template #prefix>
                            <i class="iconfont icon-mima"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <div class="login-code">
                        <el-input v-model="loginFormData.code" prop="password">
                            <template #prefix>
                                <i class="iconfont icon-yanzhengma"></i>
                            </template>
                        </el-input>
                        <div class="code-img" v-loading="codeLoading">
                            <!-- <img v-show="!codeLoading" :src="codeImg" @click="getCodeImg"> -->
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width:100%;" @click="submitLoginForm">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {getCaptchaImage} from '@/api/loginApi'

import useUser from '@/store/user'
import { ref, reactive,getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import router2 from '@/router'

const { proxy } = getCurrentInstance()
const userStore = useUser()
const router = useRouter()
console.log('是同一个router吗?', router === router2); // true, 证明是同一个router，
                                                     // 只是引入的方式不同而已，可以这样想：子组件肯定可以拿到跟组件的router，但是js要拿的话，必须直接引入'@/router'

const codeImg = ref('')
const codeLoading = ref(true)

const loginFormData = reactive({
    username: 'admin',
    password: '123456',
    cid: '',
    code: '111'
})
const loginFormRules = {
    username: [
        {required:true,message: '用户名不能为空',trigger: 'blur'}
    ],
    password: [
        {required:true,message: '密码不能为空',trigger: 'blur'}
    ],
    code: [
        {required:true,message: '验证码不能为空',trigger: 'blur'}
    ],
}

const loginFormRef = ref(null)
function submitLoginForm() {
    loginFormRef.value.validate(async(valid,fields)=>{

        if(!valid) {
            proxy.Messager.error('请填写完整')
            return
        }

        try {
            let formData = new FormData()
            Object.keys(loginFormData).forEach(ele=>formData.append(ele, loginFormData[ele]))
            formData.delete('code')
            formData.append("cCode", loginFormData.code)
            let result = await userStore.doLogin(formData)
            proxy.Messager.ok('登录成功')
            router.replace('/home')
        } catch (e) {
            // getCodeImg()
        }

    })
}

function getCodeImg() {
    /* codeLoading.value = true
    getCaptchaImage().then(res=>{
        console.log(res,'res')
        codeImg.value = res.cImg
        loginFormData.cid = res.cid
        codeLoading.value = false
    }) */
}

onMounted(()=>{
    getCodeImg()
})

</script>

<style lang="scss" scoped>
    .iconfont {
        font-size: 16px;
    }
    .login-page {
        height: 100vh;
        background-image: url(@/assets/bg.jpg);
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .login-container {
            width: 350px;
            padding: 20px;
            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
            .login-title {
                font-size: 26px;
                text-align: center;
                margin-bottom: 15px;
            }

            .login-code {
                display: flex;
                .code-img {
                    height: 34px;
                    width: 180px;
                    margin-left: 10px;
                    border-radius: 5px;
                    cursor: pointer;
                    background-color: #fff;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        /*object-fit: cover;*/
                        /*transform: scale(1.2);*/
                    }

                    .el-loading-mask {
                        .el-loading-spinner {
                            margin-top: -16px;
                        }
                        .circular {
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
            }
        }
    }

    ::v-deep .code-img .el-loading-mask .el-loading-spinner{
        margin-top: -16px;
    }
    ::v-deep .code-img .el-loading-mask .circular{
        width: 30px;
        height: 30px;
    }
</style>
